<template>
  <div class="meta-info-box" ref="refMetaInfo" :style="`height:${mainHeight}px`">
    <h1>{{ metaInfoView.index.title }}</h1>
    <div class="meta-info-box-header">
      <el-carousel class="hover" trigger="click" :interval="5000">
        <template v-for="(item, index) in metaInfoView.coverList" :key="index">
          <el-carousel-item>
            <el-image style="height: 100%;width: 100%;" fit="fill" :src="item.fullPath" />
          </el-carousel-item>
        </template>
        <el-carousel-item v-if="metaInfoView.coverList.length === 0">
          <el-image style="height: 100%;width: 100%;" fit="fill" src="" />
        </el-carousel-item>
      </el-carousel>
      <div class="meta-info-box-header-descriptions hover">
        <h2 class="meta-info-box-header-info-subtitle">{{ metaInfoView.index.subtitle }}</h2>
        <div class="meta-info-box-header-descriptions-item">
          <span class="meta-info-box-header-descriptions-item-label">作者:</span>
          <template v-for="(tag, index) in metaInfoView.authorList" :key="index">
            <el-tag closable :disable-transitions="false" type="danger" @close="handleAuthorDelete(tag.value, index)"
              size="small">
              {{ tag.label }}
            </el-tag>
          </template>
          <el-input v-show="authorInputVisible" ref="authorInputRef" v-model="authorInputValue" size="small"
            @keyup.enter="handleAuthorInputConfirm" @blur="handleAuthorInputConfirm" />
          <el-button class="meta-info-box-header-descriptions-item-author-button" v-show="!authorInputVisible"
            size="small" @click="showAuthorInput">
            <el-icon :size="16">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
                <path d="M17 15V8h-2v7H8v2h7v7h2v-7h7v-2z" fill="currentColor"></path>
              </svg>
            </el-icon>
          </el-button>
        </div>
        <div class="meta-info-box-header-descriptions-item">
          <span class="meta-info-box-header-descriptions-item-label">状态:</span>
          <el-dropdown trigger="click" @command="handleStateChange">
            <div class="meta-info-box-header-descriptions-typemenu">
              <span v-if="metaInfoView.index.state === 0">
                <el-icon :size="16" style="color: #F36B6B !important;">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <g fill="none">
                      <path
                        d="M16.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zM12 1.5A3.5 3.5 0 0 1 15.5 5h5a1 1 0 1 1 0 2h-.845l-.451 4.587A6.5 6.5 0 0 0 11.81 22H8.312a2.75 2.75 0 0 1-2.737-2.48L4.345 7H3.5a1 1 0 0 1 0-2h5A3.5 3.5 0 0 1 12 1.5zm1.716 13.089l-.07.057l-.057.07a.5.5 0 0 0 0 .568l.057.07l2.147 2.146l-2.147 2.146l-.057.07a.5.5 0 0 0 0 .568l.057.07l.07.057a.5.5 0 0 0 .568 0l.07-.057l2.146-2.147l2.146 2.147l.07.057a.5.5 0 0 0 .568 0l.07-.057l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-2.147-2.146l2.147-2.146l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-.07-.057a.5.5 0 0 0-.568 0l-.07.057l-2.146 2.147l-2.146-2.147l-.07-.057a.5.5 0 0 0-.492-.044l-.076.044zM12 3.5A1.5 1.5 0 0 0 10.5 5h3A1.5 1.5 0 0 0 12 3.5z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                </el-icon>
                <span class="meta-info-box-header-info-type">已删除</span>
              </span>
              <span v-else-if="metaInfoView.index.state === 1">
                <el-icon :size="16" style="color: #66C03A !important;">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 512 512">
                    <path
                      d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69L432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
                      fill="currentColor"></path>
                  </svg>
                </el-icon>
                <span class="meta-info-box-header-info-type">正常&emsp;</span>
              </span>
              <span v-else-if="metaInfoView.index.state === 2">
                <el-icon :size="16" style="color: #E4A13C !important;">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
                    <path d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12z"
                      fill="currentColor"></path>
                    <path d="M15 8h2v11h-2z" fill="currentColor"></path>
                    <path d="M16 22a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 22z" fill="currentColor"></path>
                  </svg>
                </el-icon>
                <span class="meta-info-box-header-info-type">未审核</span>
              </span>
              <span v-else-if="metaInfoView.index.state === 3">
                <el-icon :size="16" style="color: #3F9DFD !important;">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 576 512">
                    <path
                      d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144a143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79a47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
                      fill="currentColor"></path>
                  </svg>
                </el-icon>
                <span class="meta-info-box-header-info-type">审核中</span>
              </span>
              <el-icon :size="16"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 24 24">
                  <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z" fill="currentColor">
                  </path>
                </svg>
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="0">
                  <el-icon :size="16" style="color: #F36B6B !important;">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 24 24">
                      <g fill="none">
                        <path
                          d="M16.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zM12 1.5A3.5 3.5 0 0 1 15.5 5h5a1 1 0 1 1 0 2h-.845l-.451 4.587A6.5 6.5 0 0 0 11.81 22H8.312a2.75 2.75 0 0 1-2.737-2.48L4.345 7H3.5a1 1 0 0 1 0-2h5A3.5 3.5 0 0 1 12 1.5zm1.716 13.089l-.07.057l-.057.07a.5.5 0 0 0 0 .568l.057.07l2.147 2.146l-2.147 2.146l-.057.07a.5.5 0 0 0 0 .568l.057.07l.07.057a.5.5 0 0 0 .568 0l.07-.057l2.146-2.147l2.146 2.147l.07.057a.5.5 0 0 0 .568 0l.07-.057l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-2.147-2.146l2.147-2.146l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-.07-.057a.5.5 0 0 0-.568 0l-.07.057l-2.146 2.147l-2.146-2.147l-.07-.057a.5.5 0 0 0-.492-.044l-.076.044zM12 3.5A1.5 1.5 0 0 0 10.5 5h3A1.5 1.5 0 0 0 12 3.5z"
                          fill="currentColor"></path>
                      </g>
                    </svg>
                  </el-icon>
                  <span class="meta-info-box-header-info-type">已删除</span>
                </el-dropdown-item>
                <el-dropdown-item :command="1">
                  <el-icon :size="16" style="color: #66C03A !important;">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 512 512">
                      <path
                        d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69L432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
                        fill="currentColor"></path>
                    </svg>
                  </el-icon>
                  <span class="meta-info-box-header-info-type">正常&emsp;</span>
                </el-dropdown-item>
                <el-dropdown-item :command="2">
                  <el-icon :size="16" style="color: #E4A13C !important;">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 32 32">
                      <path d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12z"
                        fill="currentColor"></path>
                      <path d="M15 8h2v11h-2z" fill="currentColor"></path>
                      <path d="M16 22a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 22z" fill="currentColor"></path>
                    </svg>
                  </el-icon>
                  <span class="meta-info-box-header-info-type">未审核</span>
                </el-dropdown-item>
                <el-dropdown-item :command="3">
                  <el-icon :size="16" style="color: #3F9DFD !important;">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      viewBox="0 0 576 512">
                      <path
                        d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144a143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79a47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
                        fill="currentColor"></path>
                    </svg>
                  </el-icon>
                  <span class="meta-info-box-header-info-type">审核中</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="meta-info-box-header-descriptions-item">
          <span class="meta-info-box-header-descriptions-item-label">评分:</span>
          <el-rate :model-value="metaInfoView.index.rate" size="small" @change="handleRateChange" />
        </div>
        <div class="meta-info-box-header-descriptions-item">
          <span class="meta-info-box-header-descriptions-item-label">访问次数:</span>
          <span class="meta-info-box-header-info-clicktimes">{{ metaInfoView.index.clickTimes }}</span>
        </div>
        <div class="meta-info-box-header-descriptions-item">
          <span class="meta-info-box-header-descriptions-item-label">发布时间:</span>
          <!-- 会报警告,npm install default-passive-events -s main.js import default-passive-events -->
          <el-date-picker class="meta-info-box-header-descriptions-item-time" :clearable="false" :model-value="metaInfoView.index.releaseDate" @update:model-value="handleReleaseDateChange" type="datetime" placeholder="发布时间" size="small"/>
        
        </div>
        <div class="meta-info-box-header-descriptions-item">
          <span class="meta-info-box-header-descriptions-item-label">录入时间:</span>
          <span class="meta-info-box-header-info-time">{{ new Date(metaInfoView.index.createDate).toLocaleString()
          }}</span>
        </div>
        <div class="meta-info-box-header-descriptions-item">
          <div class="meta-info-box-header-descriptions-item-button-group">
            <el-button
              v-show="this.metaInfoView.index.type === 3 || this.metaInfoView.index.type === 4 || this.metaInfoView.index.type === 5"
              @click="handleRead" type="success" style="color:rgb(0, 202, 75)" link size="small">
              <el-icon :size="20">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
                  <g fill="none">
                    <path
                      d="M10 16.137A2.742 2.742 0 0 1 8 17H3.75A1.75 1.75 0 0 1 2 15.25V4.75C2 3.784 2.784 3 3.75 3H8c.788 0 1.499.331 2 .863A2.742 2.742 0 0 1 12 3h4.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 16.25 17H12a2.742 2.742 0 0 1-2-.863zM3.5 4.75v10.5c0 .138.112.25.25.25H8c.69 0 1.25-.56 1.25-1.25v-8.5c0-.69-.56-1.25-1.25-1.25H3.75a.25.25 0 0 0-.25.25zm7.25 9.5c0 .69.56 1.25 1.25 1.25h4.25a.25.25 0 0 0 .25-.25V4.75a.25.25 0 0 0-.25-.25H12c-.69 0-1.25.56-1.25 1.25v8.5z"
                      fill="currentColor"></path>
                  </g>
                </svg>
              </el-icon>
              <span>浏览</span>
            </el-button>
            <el-button @click="handleFavorite" type="danger" link size="small">
              <el-icon v-if="metaInfoView.favorite" :size="20">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                  <path
                    d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
                    fill="currentColor"></path>
                </svg>
              </el-icon>
              <el-icon v-else :size="20">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                  <path
                    d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5C22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1l-.1-.1C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5c0 2.89-3.14 5.74-7.9 10.05z"
                    fill="currentColor"></path>
                </svg>
              </el-icon>
              <span>喜欢</span>
            </el-button>
            <el-button @click="handleDelete" type="info" link size="small">
              <el-icon :size="20">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                  <g fill="none">
                    <path
                      d="M12 1.75a3.25 3.25 0 0 1 3.245 3.066L15.25 5h5.25a.75.75 0 0 1 .102 1.493L20.5 6.5h-.796l-1.28 13.02a2.75 2.75 0 0 1-2.561 2.474l-.176.006H8.313a2.75 2.75 0 0 1-2.714-2.307l-.023-.174L4.295 6.5H3.5a.75.75 0 0 1-.743-.648L2.75 5.75a.75.75 0 0 1 .648-.743L3.5 5h5.25A3.25 3.25 0 0 1 12 1.75zm6.197 4.75H5.802l1.267 12.872a1.25 1.25 0 0 0 1.117 1.122l.127.006h7.374c.6 0 1.109-.425 1.225-1.002l.02-.126L18.196 6.5zM13.75 9.25a.75.75 0 0 1 .743.648L14.5 10v7a.75.75 0 0 1-1.493.102L13 17v-7a.75.75 0 0 1 .75-.75zm-3.5 0a.75.75 0 0 1 .743.648L11 10v7a.75.75 0 0 1-1.493.102L9.5 17v-7a.75.75 0 0 1 .75-.75zm1.75-6a1.75 1.75 0 0 0-1.744 1.606L10.25 5h3.5A1.75 1.75 0 0 0 12 3.25z"
                      fill="currentColor"></path>
                  </g>
                </svg>
              </el-icon>
              <span>删除</span>
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 标签 -->
    <n-collapse class="meta-info-collapse hover">
      <template #arrow>
        <span />
      </template>
      <template #header-extra>
        <el-button @click="showTagInput" type="success" size="small" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none">
                <path
                  d="M11.883 3.007L12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
      </template>
      <n-collapse-item name="1">
        <template #header>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none">
                <path
                  d="M17.5 6.5a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0zm-6.992-3.602A3.25 3.25 0 0 1 12.75 2h5.499A2.75 2.75 0 0 1 21 4.75v4.953a3.25 3.25 0 0 1-.97 2.316l-6.946 6.835a2.25 2.25 0 0 1-3.166-.01l-6.256-6.226a2.25 2.25 0 0 1 .034-3.223l6.812-6.497zm2.243.602c-.45 0-.883.173-1.208.484L4.73 10.48a.75.75 0 0 0-.011 1.075l6.257 6.226a.75.75 0 0 0 1.055.003l6.945-6.834a1.75 1.75 0 0 0 .523-1.247V4.75c0-.69-.56-1.25-1.25-1.25h-5.5zm7.98 9.232l-1.475 1.451c-.04.055-.085.106-.134.155l-5.334 5.229a3.251 3.251 0 0 1-4.575-.013L7.282 17.63l-2.411-2.386a1.262 1.262 0 0 1-.107-.12l-1.63-1.621a2.75 2.75 0 0 0 .682 2.807l4.356 4.311a4.75 4.75 0 0 0 6.666.016l5.334-5.229a2.75 2.75 0 0 0 .69-2.813a4.215 4.215 0 0 1-.131.136z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
          <span class="meta-info-collapse-title">标签</span>
        </template>
        <div class="collapse-item-tag">
          <template v-for="(tag, index) in metaInfoView.tagList" :key="index">
            <el-tag closable :disable-transitions="false" type="warning" @close="handleTagDelete(tag.value, index)"
              size="small">
              {{ tag.label }}
            </el-tag>
          </template>
          <el-input v-show="tagInputVisible" ref="tagInputRef" v-model="tagInputValue" size="small"
            @keyup.enter="handleTagInputConfirm" @blur="handleTagInputConfirm" />
        </div>
      </n-collapse-item>
    </n-collapse>
    <!-- 描述 -->
    <n-collapse class="meta-info-collapse hover">
      <template #header-extra>
        <el-button size="small" @click="handleDescriptionEdit" type="warning" link>
          <el-icon v-show="!descriptionTextareaVisible" :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 576 512">
              <path
                d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9L216.2 301.8l-7.3 65.3l65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1l30.9-30.9c4-4.2 4-10.8-.1-14.9z"
                fill="currentColor"></path>
            </svg>
          </el-icon>
          <el-icon v-show="descriptionTextareaVisible" :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <path
                d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7.53 12L9 10.5l1.4-1.41l2.07 2.08L17.6 6L19 7.41L12.47 14zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z"
                fill="currentColor"></path>
            </svg>
          </el-icon>
        </el-button>
      </template>
      <template #arrow>
        <span />
      </template>
      <n-collapse-item name="1">
        <template #header>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <path
                d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"
                fill="currentColor"></path>
            </svg>
          </el-icon>
          <span class="meta-info-collapse-title">描述</span>
        </template>
        <span v-show="!descriptionTextareaVisible" style="color: #CE9178;font-size: 14px;">{{
          metaInfoView.index.description
        }}</span>
        <el-input v-show="descriptionTextareaVisible" v-model="descriptionTextarea" :autosize="{ minRows: 4 }"
          type="textarea" placeholder="Please input" />
      </n-collapse-item>
    </n-collapse>
    <!-- 文件 -->
    <n-collapse class="meta-info-collapse-table hover">
      <template #header-extra>
        <el-button class="collapse-header-button" type="success" :disabled="fileTableSelection" @click="handleFileLink"
          size="small" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
              <g fill="none">
                <path
                  d="M16 5.268V13a3 3 0 0 1-3 3H5.268A2 2 0 0 0 7 17h6a4 4 0 0 0 4-4V7a2 2 0 0 0-1-1.732zM11.5 9.5a.5.5 0 0 0 0-1h-2v-2a.5.5 0 1 0-1 0v2h-2a.5.5 0 0 0 0 1h2v2a.5.5 0 0 0 1 0v-2h2zM13 3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8zm1 2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button class="collapse-header-button" type="primary" :disabled="metaInfoView.fileList.length < 1"
          @click="handleFileTableSelection" size="small" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
              <g fill="none">
                <path
                  d="M6.249 5.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75h-7.5zM5.25 3A2.25 2.25 0 0 0 3 5.25v9.5A2.25 2.25 0 0 0 5.25 17h9.499a2.25 2.25 0 0 0 2.25-2.25v-9.5A2.25 2.25 0 0 0 14.749 3H5.25zM4.5 5.25a.75.75 0 0 1 .75-.75h9.499a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75v-9.5z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button class="collapse-header-button" type="danger"
          :disabled="!fileTableSelection || fileTableSelectList.length === 0" @click="handleFileListBatchDisassociation"
          size="small" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path>
                <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path>
                <path d="M16 21v-2"></path>
                <path d="M19 16h2"></path>
                <path d="M3 8h2"></path>
                <path d="M8 3v2"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
      </template>
      <template #arrow>
        <span />
      </template>
      <n-collapse-item name="1">
        <template #header>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
              <path
                d="M384 80H128c-26 0-43 14-48 40L48 272v112a48.14 48.14 0 0 0 48 48h320a48.14 48.14 0 0 0 48-48V272l-32-152c-5-27-23-40-48-40z"
                fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path>
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
                d="M48 272h144"></path>
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
                d="M320 272h144"></path>
              <path d="M192 272a64 64 0 0 0 128 0" fill="none" stroke="currentColor" stroke-linecap="round"
                stroke-linejoin="round" stroke-width="32"></path>
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
                d="M144 144h224"></path>
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"
                d="M128 208h256"></path>
            </svg>
          </el-icon>
          <span class="meta-info-collapse-title">文件列表</span>
        </template>
        <el-table ref="refsFileTable" row-class-name="view-table-row" :data="metaInfoView.fileList" :max-height="200"
          :show-header="false" @row-dblclick="fileNameDetail" @selection-change="handleFileSelectionChange"
          style="width: 100%;" size="small">
          <el-table-column v-if="fileTableSelection" type="selection" />
          <el-table-column label="文件" prop="name">
            <template #default="props">
              <span>{{ props.row.dir + '\\' + props.row.name + props.row.ext }}</span>
            </template>
          </el-table-column>
          <el-table-column align="right" label="操作" fixed="right">
            <template #default="scope">
              <el-button size="small" :disabled="fileTableSelection" type="danger"
                @click="handleFileDisassociation(scope)" link>
                <el-icon :size="24">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path>
                      <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path>
                      <path d="M16 21v-2"></path>
                      <path d="M19 16h2"></path>
                      <path d="M3 8h2"></path>
                      <path d="M8 3v2"></path>
                    </g>
                  </svg>
                </el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </n-collapse-item>
    </n-collapse>
    <!-- 子索引 -->
    <n-collapse class="meta-info-collapse-table hover">
      <template #header-extra>
        <el-button class="collapse-header-button" type="success" size="small" :disabled="subindexTableSelection"
          @click="handleCreateSub" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
              <g fill="none">
                <path
                  d="M16 5.268V13a3 3 0 0 1-3 3H5.268A2 2 0 0 0 7 17h6a4 4 0 0 0 4-4V7a2 2 0 0 0-1-1.732zM11.5 9.5a.5.5 0 0 0 0-1h-2v-2a.5.5 0 1 0-1 0v2h-2a.5.5 0 0 0 0 1h2v2a.5.5 0 0 0 1 0v-2h2zM13 3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8zm1 2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button class="collapse-header-button" type="warning" size="small" :disabled="subindexTableSelection"
          @click="handleOpenSubindexLinkDialog" link>
          <el-icon :size="22">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none">
                <path
                  d="M6 8.965a3.5 3.5 0 1 0-1.5-.11v6.29A3.502 3.502 0 0 0 5.5 22a3.5 3.5 0 0 0 .5-6.965V13h6.25A3.75 3.75 0 0 0 16 9.25v-.285a3.5 3.5 0 1 0-1.5-.11v.395a2.25 2.25 0 0 1-2.25 2.25H6V8.965zM7.5 5.5a2 2 0 1 1-4 0a2 2 0 0 1 4 0zm10 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0zm-12 11a2 2 0 1 1 0 4a2 2 0 0 1 0-4zM23 18.75A3.75 3.75 0 0 0 19.25 15l-.102.007a.75.75 0 0 0 .102 1.493l.154.005A2.25 2.25 0 0 1 19.25 21l-.003.005l-.102.007a.75.75 0 0 0 .108 1.493V22.5l.2-.005A3.75 3.75 0 0 0 23 18.75zm-6.5-3a.75.75 0 0 0-.75-.75l-.2.005a3.75 3.75 0 0 0 .2 7.495l.102-.007A.75.75 0 0 0 15.75 21l-.154-.005a2.25 2.25 0 0 1 .154-4.495l.102-.007a.75.75 0 0 0 .648-.743zm3.5 3a.75.75 0 0 0-.75-.75h-3.5l-.102.007a.75.75 0 0 0 .102 1.493h3.5l.102-.007A.75.75 0 0 0 20 18.75z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button class="collapse-header-button" type="primary" size="small"
          :disabled="metaInfoView.subindexList.length < 1" @click="handleSubindexTableSelection" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
              <g fill="none">
                <path
                  d="M6.249 5.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75h-7.5zM5.25 3A2.25 2.25 0 0 0 3 5.25v9.5A2.25 2.25 0 0 0 5.25 17h9.499a2.25 2.25 0 0 0 2.25-2.25v-9.5A2.25 2.25 0 0 0 14.749 3H5.25zM4.5 5.25a.75.75 0 0 1 .75-.75h9.499a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75v-9.5z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button size="small" type="danger" class="collapse-header-button"
          :disabled="!subindexTableSelection || subindexTableSelectList.length === 0"
          @click="handleSubIndexListBatchDisassociation" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path>
                <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path>
                <path d="M16 21v-2"></path>
                <path d="M19 16h2"></path>
                <path d="M3 8h2"></path>
                <path d="M8 3v2"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
      </template>
      <template #arrow>
        <span />
      </template>
      <n-collapse-item title="子索引" name="1">
        <template #header>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
              <path
                d="M26 6a3.996 3.996 0 0 0-3.858 3H17.93A7.996 7.996 0 1 0 9 17.93v4.212a4 4 0 1 0 2 0v-4.211a7.951 7.951 0 0 0 3.898-1.62l3.669 3.67A3.953 3.953 0 0 0 18 22a4 4 0 1 0 4-4a3.952 3.952 0 0 0-2.019.567l-3.67-3.67A7.95 7.95 0 0 0 17.932 11h4.211A3.993 3.993 0 1 0 26 6zM12 26a2 2 0 1 1-2-2a2.002 2.002 0 0 1 2 2zm-2-10a6 6 0 1 1 6-6a6.007 6.007 0 0 1-6 6zm14 6a2 2 0 1 1-2-2a2.002 2.002 0 0 1 2 2zm2-10a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2z"
                fill="currentColor"></path>
            </svg>
          </el-icon>
          <span class="meta-info-collapse-title">子索引</span>
        </template>
        <el-table row-class-name="view-table-row" :data="metaInfoView.subindexList" :max-height="200" :show-header="false"
          @row-dblclick="indexNameDetail" @selection-change="handleSubindexSelectionChange" style="width: 100%;"
          size="small" table-layout="auto">
          <el-table-column v-if="subindexTableSelection" type="selection" />
          <el-table-column label="主标题" prop="title" />
          <el-table-column align="right" label="操作" width="50" fixed="right">
            <template #default="scope">
              <el-button :disabled="subindexTableSelection" type="danger" @click="handleSubindexDisassociation(scope)"
                link>
                <el-icon :size="24">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path>
                      <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path>
                      <path d="M16 21v-2"></path>
                      <path d="M19 16h2"></path>
                      <path d="M3 8h2"></path>
                      <path d="M8 3v2"></path>
                    </g>
                  </svg>
                </el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </n-collapse-item>
    </n-collapse>
    <!-- 封面 -->
    <n-collapse class="meta-info-collapse hover">
      <template #header-extra>
        <el-button class="collapse-header-button" type="success" :disabled="coverTableSelection" @click="handleCoverLink"
          size="small" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
              <g fill="none">
                <path
                  d="M16 5.268V13a3 3 0 0 1-3 3H5.268A2 2 0 0 0 7 17h6a4 4 0 0 0 4-4V7a2 2 0 0 0-1-1.732zM11.5 9.5a.5.5 0 0 0 0-1h-2v-2a.5.5 0 1 0-1 0v2h-2a.5.5 0 0 0 0 1h2v2a.5.5 0 0 0 1 0v-2h2zM13 3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8zm1 2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button class="collapse-header-button" type="primary" :disabled="metaInfoView.coverList.length < 1"
          @click="handleCoverTableSelection" size="small" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
              <g fill="none">
                <path
                  d="M6.249 5.5a.75.75 0 0 0-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-7.5a.75.75 0 0 0-.75-.75h-7.5zM5.25 3A2.25 2.25 0 0 0 3 5.25v9.5A2.25 2.25 0 0 0 5.25 17h9.499a2.25 2.25 0 0 0 2.25-2.25v-9.5A2.25 2.25 0 0 0 14.749 3H5.25zM4.5 5.25a.75.75 0 0 1 .75-.75h9.499a.75.75 0 0 1 .75.75v9.5a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75v-9.5z"
                  fill="currentColor"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
        <el-button class="collapse-header-button" type="danger"
          :disabled="!coverTableSelection || coverTableSelectList.length === 0"
          @click="handleCoverListBatchDisassociation" size="small" link>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path>
                <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path>
                <path d="M16 21v-2"></path>
                <path d="M19 16h2"></path>
                <path d="M3 8h2"></path>
                <path d="M8 3v2"></path>
              </g>
            </svg>
          </el-icon>
        </el-button>
      </template>
      <template #arrow>
        <span />
      </template>
      <n-collapse-item name="1">
        <template #header>
          <el-icon :size="24">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
              y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
              <g>
                <g>
                  <g>
                    <path d="M400,421.3V154.7c0-23.5-19.2-42.7-42.7-42.7H90.7C67.2,112,48,131.2,48,154.7v266.7c0,23.5,19.2,42.7,42.7,42.7h266.7
				C380.8,464,400,444.8,400,421.3z M157.3,304l45.3,64l66.7-96l88,128H90.7L157.3,304z"></path>
                  </g>
                </g>
                <path d="M421.3,48H154.7C131.2,48,112,67.2,112,90.7V96h32h229.3c23.5,0,42.7,19.2,42.7,42.7V368v32h5.3
		c23.5,0,42.7-19.2,42.7-42.7V90.7C464,67.2,444.8,48,421.3,48z"></path>
              </g>
            </svg>
          </el-icon>
          <span class="meta-info-collapse-title">封面</span>
        </template>
        <el-table ref="refsFileTable" row-class-name="view-table-row" :data="metaInfoView.coverList" :max-height="200"
          :show-header="false" @row-dblclick="fileNameDetail" @selection-change="handleCoverSelectionChange"
          style="width: 100%;" size="small">
          <el-table-column v-if="coverTableSelection" type="selection" />
          <el-table-column label="文件" prop="name">
            <template #default="props">
              <span>{{ props.row.dir + props.row.name + props.row.ext }}</span>
            </template>
          </el-table-column>
          <el-table-column align="right" label="操作" fixed="right">
            <template #default="scope">
              <el-button size="small" :disabled="coverTableSelection" type="danger"
                @click="handleCoverDisassociation(scope)" link>
                <el-icon :size="24">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
                    <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path>
                      <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path>
                      <path d="M16 21v-2"></path>
                      <path d="M19 16h2"></path>
                      <path d="M3 8h2"></path>
                      <path d="M8 3v2"></path>
                    </g>
                  </svg>
                </el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </n-collapse-item>
    </n-collapse>
    <!-- 相关 -->
    <n-collapse class="meta-info-collapse hover">
      <template #header-extra>
        <el-icon :size="24">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
            <g fill="none">
              <path
                d="M7.75 12a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0zm6 0a1.75 1.75 0 1 1-3.5 0a1.75 1.75 0 0 1 3.5 0zM18 13.75a1.75 1.75 0 1 0 0-3.5a1.75 1.75 0 0 0 0 3.5z"
                fill="currentColor"></path>
            </g>
          </svg>
        </el-icon>
      </template>
      <template #arrow>
        <span />
      </template>
      <n-collapse-item name="1">
        <template #header>
          <el-icon :size="24">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
              <path
                d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.97.89 1.66.89H22c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7.07L2.4 12l4.66-7H22v14z"
                fill="currentColor"></path>
              <circle cx="9" cy="12" r="1.5" fill="currentColor"></circle>
              <circle cx="14" cy="12" r="1.5" fill="currentColor"></circle>
              <circle cx="19" cy="12" r="1.5" fill="currentColor"></circle>
            </svg>
          </el-icon>
          <span class="meta-info-collapse-title">相似内容</span>
        </template>
        <div>
          <template v-for="(item, index) in similarList" :key="index">
            <el-link style="color:#F8A1A4;" type="warning">
              <el-icon :size="20">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
                  <path
                    d="M20.413 14.584l-7.997-7.997a2.002 2.002 0 0 0-2.832 0l-7.997 7.997a2.002 2.002 0 0 0 0 2.832l3.291 3.292L3 22.585L4.414 24l1.879-1.878l3.291 3.291a2.002 2.002 0 0 0 2.832 0l2.256-2.256l-1.416-1.415l-2.258 2.257l-7.997-7.997l7.997-8.001l8.001 8.001L17.5 17.5l1.415 1.415l1.498-1.499a2.002 2.002 0 0 0 0-2.832z"
                    fill="currentColor"></path>
                  <path
                    d="M30.413 14.584l-3.291-3.292L29 9.415L27.586 8l-1.878 1.878l-3.292-3.291a2.002 2.002 0 0 0-2.832 0l-2.256 2.256l1.415 1.414l2.255-2.256l8.001 8.001l-8.001 7.997l-7.997-7.997l1.5-1.501l-1.416-1.416l-1.498 1.499a2.002 2.002 0 0 0 0 2.832l7.997 7.997a2.002 2.002 0 0 0 2.832 0l7.997-7.997a2.002 2.002 0 0 0 0-2.832z"
                    fill="currentColor"></path>
                </svg>
              </el-icon>
              &nbsp;
              <span>{{ item.title }}</span>
            </el-link>
          </template>
        </div>
      </n-collapse-item>
    </n-collapse>
  </div>
</template>

<script>
import { MetaView, fileNameDetail, indexNameDetail } from '@/views'
export default {
  computed: {},
  props: {
    metaInfoView: {
      type: MetaView,
      default: MetaView.defaultView
    }
  },
  beforeUpdate() {/**/ },
  beforeCreate() {/**/ },
  beforeMount() {
    this.$nextTick(() => {
      const refsSearchHeader = this.$refs.refMetaInfo.parentElement.parentElement.parentElement.children[0]
      const refsSearchTab = this.$refs.refMetaInfo.parentElement.children[0]
      this.mainHeight = document.body.clientHeight
        - refsSearchHeader.clientHeight
        - refsSearchTab.clientHeight
        - 24
      window.addEventListener('resize', () => {
        this.mainHeight = document.body.clientHeight
          - refsSearchHeader.clientHeight
          - refsSearchTab.clientHeight
          - 24
      })
    })
  },
  methods: {
    handleFavorite() {
      this.$emit(this.metaInfoView.favorite ? "delete:favorite" : "add:favorite")
    },
    handleRead() {
      this.$emit("read:index")
    },
    handleDelete() {
      this.$emit("delete:index")
    },
    handleRateChange(event) {
      //TODO 添加等待
      this.$emit('patch:index', {
        field: 'rate',
        val: event
      })
    },
    handleDescriptionEdit(event) {
      if (this.descriptionTextareaVisible) {
        event.preventDefault()
        event.stopPropagation()
        this.$emit('patch:index', {
          field: 'description',
          val: this.descriptionTextarea
        })
        //TODO 添加等待
        this.descriptionTextareaVisible = false
      } else {
        this.descriptionTextareaVisible = true
        this.descriptionTextarea = this.metaInfoView.index.description
      }
    },
    handleStateChange(event) {
      this.$emit('patch:index', {
        field: 'state',
        val: event
      })
    },
    handleReleaseDateChange(event){
      this.$emit('patch:index', {
        field: 'releaseDate',
        val: event.getTime()
      })
    },
    /* author--start */
    showAuthorInput() {
      this.authorInputVisible = true
      this.$nextTick(() => this.$refs.authorInputRef.focus())
    },
    handleAuthorInputConfirm() {
      if (this.authorInputValue !== '' && this.authorInputValue !== undefined && this.authorInputValue !== null) {
        //TODO 添加等待
        this.$emit("post:index:author", this.authorInputValue)
      }
      this.authorInputVisible = false
      this.authorInputValue = ''
    },
    handleAuthorDelete(event, index) {
      //TODO 添加等待
      this.$emit("delete:index:author", { id: event, index: index })
    },
    /* author--end */
    /* tag--start */
    showTagInput() {
      this.tagInputVisible = true
      // this.$nextTick(() => this.$refs.tagInputRef.focus())
    },
    handleTagInputConfirm() {
      if (this.tagInputValue !== '' && this.tagInputValue !== undefined && this.tagInputValue !== null) {
        //TODO 添加等待
        this.$emit("post:index:tag", this.tagInputValue)
      }

      this.tagInputVisible = false
      this.tagInputValue = ''
    },
    handleTagDelete(event, index) {
      //TODO 添加等待
      this.$emit("delete:index:tag", { id: event, index: index })
    },
    /* tag--end */
    /* file--start */
    fileNameDetail: fileNameDetail,
    handleFileLink(event) {
      event.preventDefault();
      event.stopPropagation()
      //TODO 添加等待
      this.$emit("post:index:file")
    },
    handleFileTableSelection(event) {
      if (this.fileTableSelection) {
        this.fileTableSelection = false
      } else {
        event.preventDefault();
        event.stopPropagation()
        this.fileTableSelection = true
      }
    },
    handleFileDisassociation(scope) {
      //TODO 添加等待
      this.$emit("delete:index:file", { ifid: scope.row.ifid, index: scope.$index })
    },
    handleFileSelectionChange(list) {
      this.fileTableSelectList = list.map(i => i.ifid)
    },
    handleFileListBatchDisassociation(event) {
      event.preventDefault()
      event.stopPropagation()
      //TODO 添加等待
      this.$emit("batchDelete:index:file", this.fileTableSelectList)
    },
    /* file--end */
    /* cover--start */
    handleCoverLink(event) {
      event.preventDefault();
      event.stopPropagation()

      this.$emit("post:index:cover")
    },
    handleCoverTableSelection(event) {
      if (this.coverTableSelection) {
        this.coverTableSelection = false
      } else {
        event.preventDefault();
        event.stopPropagation()
        this.coverTableSelection = true
      }
    },
    handleCoverDisassociation(scope) {
      this.$emit("delete:index:cover", { icid: scope.row.icid, index: scope.$index })
    },
    handleCoverSelectionChange(list) {
      this.coverTableSelectList = list.map(i => i.icid)
    },
    handleCoverListBatchDisassociation(event) {
      event.preventDefault()
      event.stopPropagation()
      this.$emit("batchDelete:index:cover", this.coverTableSelectList)
    },
    /* cover--end */
    /* subview--start */
    indexNameDetail: indexNameDetail,
    handleCreateSub(event) {
      event.preventDefault();
      event.stopPropagation()

      this.$emit("post:index:subindex")
    },
    handleSubindexDisassociation(scope) {
      this.$emit("delete:index:subindex", { isid: scope.row.isid, index: scope.$index })
    },
    handleSubindexSelectionChange(list) {
      this.subindexTableSelectList = list.map(i => i.isid)
    },
    handleSubIndexListBatchDisassociation(event) {
      event.preventDefault();
      event.stopPropagation()

      this.$emit("batchDelete:index:subindex", this.subindexTableSelectList)
    },
    handleOpenSubindexLinkDialog(event) {
      event.preventDefault();
      event.stopPropagation()
      this.subindexLinkDialogVisible = true
    },
    handleSubindexTableSelection(event) {
      if (this.subindexTableSelection) {
        this.subindexTableSelection = false
      } else {
        event.preventDefault();
        event.stopPropagation()
        this.subindexTableSelection = true
      }
    }
    /* subview--end */
  },
  data() {
    return {
      mainHeight: 0,
      /* author--start */
      authorInputValue: '',
      authorInputVisible: false,
      /* author-end */

      /* tag--start */
      tagInputValue: '',
      tagInputVisible: false,
      /* tag--end */

      /* description--start */
      descriptionTextarea: '',
      descriptionTextareaVisible: false,
      /* description--end */

      /* subindex--start */
      subindexTableSelection: false,
      subindexLinkDialogVisible: false,
      subindexTableSelectList: new Array(),
      /* subindex--end */

      /* file--start */
      fileTableSelection: false,
      fileTableSelectList: new Array(),
      /* file--end */
      /* cover--start */
      coverTableSelection: false,
      coverTableSelectList: new Array(),
      /* cover--end */
      similarList: new Array()
    }
  },
}
</script>

<style>
.meta-info-box-header-descriptions-item-button-group .el-button {
  margin: 0 !important;
}

.meta-info-title {
  display: flex;
  flex-wrap: nowrap;
}

.meta-info-box {
  overflow-y: auto;
  padding-left: 27.67px;
  padding-right: 27.67px;
  background-color: #1E1E1E;
}

.meta-info-box-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  margin-bottom: 20px;
}

.meta-info-box-header .el-carousel {
  width: 65%;
  height: 40%;
  margin-right: 20px;
}

.hover:hover {
  box-shadow: 0px 0px 3px 1px #D4E4B4;
}


.meta-info-box h1 {
  color: #F8A1A4;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: left;
}

.meta-info-box-header-info {
  padding: 3px 5px 3px 5px !important;
}

.collapse-item-tag {
  display: flex;
  flex-wrap: wrap;
}

.collapse-item-tag .el-button--small {
  --el-button-size: 20px !important;
  margin: 2px !important;
}

.collapse-item-tag .el-tag {
  margin: 2px !important;
}

.meta-info-box-header-descriptions {
  padding-left: 5px;
  padding-right: 5px;
  width: 35%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.meta-info-box-header-descriptions-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.meta-info-box-header-descriptions-item-time {
  --el-date-editor-width: 165px !important;
}
.meta-info-box-header-descriptions-item-author-button {
  --el-button-size: 20px !important;
  margin: 2px !important;
}

.meta-info-box-header-descriptions-item .el-tag {
  margin: 2px !important;
}

.meta-info-box-header-descriptions-item-label {
  color: #E2D49E !important;
  font-size: 15px !important;
  font-weight: lighter !important;
  margin-right: 15px;
}

.meta-info-box-header-descriptions-typemenu,
.meta-info-box-header-descriptions-typemenu span {
  display: flex;
  align-items: center;
  text-align: center;
}

.meta-info-box-header-descriptions .el-descriptions__header {
  margin-bottom: 5px !important;
}

.meta-info-box-header-info-subtitle {
  color: #E5E510 !important;
  margin-top: 0 !important;
  margin-bottom: 5px !important;
}

.meta-info-box-header-descriptions-item-value {
  margin-left: auto;
  margin-right: auto;
}

.meta-info-box-header-info-notetype {
  color: #0DBC79 !important;
  font-size: 13px !important;
  font-weight: bolder !important;
}

.meta-info-box-header-info-time {
  color: #CBA1AA !important;
  font-size: 13px !important;
  font-weight: bolder !important;
}

.meta-info-box-header-info-clicktimes {
  color: #FA5431 !important;
  font-size: 13px !important;
  font-weight: bolder !important;
}

.meta-info-box-header-info-type {
  color: #CE9178 !important;
  margin-right: 2px;
  margin-left: 6px;
  font-size: 13px !important;
  font-weight: bolder !important;
}

.meta-info-collapse {
  margin-bottom: 20px;
}

.meta-info-collapse .n-collapse-item__content-inner {
  padding: 10px !important;
}

.meta-info-collapse .n-collapse-item__header {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  padding-right: 5px !important;
  background-color: #2D2D2D;
}

.meta-info-collapse-title {
  margin-left: 5px !important;
  font-weight: bolder;
  font-size: medium;
}

.meta-info-collapse-table {
  margin-bottom: 20px;
}

.meta-info-collapse-table .n-collapse-item__content-inner {
  padding: 0px !important;
}

.meta-info-collapse-table .n-collapse-item__header {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  padding-right: 5px !important;
  background-color: #2D2D2D;
}

.view-table-row {
  --el-table-tr-bg-color: #1E1E1E !important;
  --el-bg-color: #1E1E1E !important;
}

.collapse-header-button {
  margin-left: 0px !important;
}

.el-message-box__header {
  padding: 0px !important;
}

.el-message-box__btns {
  padding: 0px !important;
}
</style>